<script setup lang="ts">
import { ref } from 'vue'
import useApi from '../useApi';
import msgModal from '../components/msgModal.vue'
// 引入需要的图标组件
import { Search, Plus, Check, Refresh } from '@element-plus/icons-vue'

const msgModalRef = ref(msgModal);
const showModal = (title,times=1000) => {
	if(msgModalRef.value){
		msgModalRef.value.openMsg(title,times);
	}
}
const inputKeyNum =  (event) =>  {
    if(inputType.value == 1){
        phoneNumSearch.value = phoneNumSearch.value+event.target.innerText;
    }else if(inputType.value == 2){
        phoneNum.value = phoneNum.value+event.target.innerText;
    }else if(inputType.value == 3){
        password.value = password.value+event.target.innerText;
    }else if(inputType.value == 4){
        repassword.value = repassword.value+event.target.innerText;
    }else if(inputType.value == 5){
        giveMoney.value = giveMoney.value+event.target.innerText;
    }else{
        birthday.value = birthday.value+event.target.innerText;
    }
}
const deleteKeyNum =  () =>  {
    if(inputType.value == 1){
        phoneNumSearch.value = phoneNumSearch.value.substring(0,phoneNumSearch.value.length-1);
    }else if(inputType.value == 2){
        phoneNum.value = phoneNum.value.substring(0,phoneNum.value.length-1);
    }else if(inputType.value == 3){
        password.value = password.value.substring(0,password.value.length-1);
    }else if(inputType.value == 4){
        repassword.value = repassword.value.substring(0,repassword.value.length-1);
    }else if(inputType.value == 5){
        giveMoney.value = giveMoney.value.substring(0,giveMoney.value.length-1);
    }else{
        birthday.value = birthday.value.substring(0,birthday.value.length-1);
    }
}
const clearKeyNum =  () =>  {
	if(inputType.value == 1){
        phoneNumSearch.value = '';
    }else if(inputType.value == 2){
        phoneNum.value = '';
    }else if(inputType.value == 3){
        password.value = '';
    }else if(inputType.value == 4){
        repassword.value = '';
    }else if(inputType.value == 5){
        giveMoney.value = '';
    }else{
        birthday.value = '';
    }
}
let inputType = ref(1);
let userinfo:any = ref({});
let phoneNum = ref(''),phoneNumSearch = ref(''),memberSearchShow = ref(false),sex = ref(1),password = ref(''),birthday = ref(''),optionType = ref(1);
let balance = ref(''),giveMoney = ref(''),repassword = ref('');
const searchMemberInfo = () =>{
	if(phoneNumSearch.value == ''){
		showModal('请输入手机号',1000);
		return;
	}
	if(phoneNumSearch.value.length != 11){
		showModal('请输入正确的手机号',1000);
		return;
	}
	optionType.value = 1;
	getUserInfo();
}
const createMemberInfo = () =>{
	clearFormData();
	optionType.value = 2;
}
const saveMemberInfo = async() =>{
    if(password.value != repassword.value){
        showModal('两次密码不一致',1000);
        return;
    }
	let bodyData = ref({});
    let thisUserData:any = userinfo.value;
    bodyData.value = {
		userId:thisUserData.id,
		phone:phoneNum.value,
		password:password.value,
		sex:sex.value,
		birthday:birthday.value
    }
    const options:any = {
        headers: {
            "Content-Type": "application/json",
            "token":localStorage.getItem('token')
        },
        method: "POST",
        body:JSON.stringify(bodyData.value)
    };
    let res:any = await useApi('index/saveUserInfo',options); 
    if(res.code == 1){
		getUserInfo();
		showModal('保存成功',1000);
		optionType.value = 1;
    }else{
        showModal(res.msg);
    }
}
const createMemberInfoSave = async() =>{
	let bodyData = ref({});
    bodyData.value = {
		phone:phoneNum.value,
		password:password.value,
		sex:sex.value,
        // balance:balance.value,
        // giveMoney:giveMoney.value,
		birthday:birthday.value
    }
    const options:any = {
        headers: {
            "Content-Type": "application/json",
            "token":localStorage.getItem('token')
        },
        method: "POST",
        body:JSON.stringify(bodyData.value)
    };
    let res:any = await useApi('index/createUserInfo',options); 
    if(res.code == 1){
		phoneNumSearch.value = phoneNum.value;
		getUserInfo();
		showModal('保存成功',1000);
		optionType.value = 1;
    }else{
        showModal(res.msg);
    }
}
const clearFormData = () =>{
	optionType.value = 1;
	phoneNum.value = '';
	phoneNumSearch.value = '';
	password.value = '';
    balance.value = '';
    giveMoney.value = '';
	sex.value = 1;
	birthday.value = '';
}
const getUserInfo = async()=>{
    let bodyData = ref({});
    bodyData.value = {
        phone:phoneNumSearch.value
    }
    const options:any = {
        headers: {
            "Content-Type": "application/json",
            "token":localStorage.getItem('token')
        },
        method: "POST",
        body:JSON.stringify(bodyData.value)
    };
    let res:any = await useApi('index/getUserInfo',options); 
    if(res.code == 1){
        userinfo.value = res.data;
        let thisUserData:any = userinfo.value;
		phoneNum.value = thisUserData.userPhone;
		password.value = thisUserData.payPassword;
        repassword.value = thisUserData.payPassword;
		birthday.value = thisUserData.birthday;
		sex.value = thisUserData.sex;
    }else{
        showModal(res.msg);
    }
}
</script> 
<template>
	<main class="membermain">
		<msgModal ref="msgModalRef"/>
		<Transition name="memberRechargeSearch">
            <div class="memberRechargeSearchModel" v-show='memberSearchShow'>
                <div class="modelInfo">
                    <div class="numKey">
                        <button @click="inputKeyNum" class="key">1</button>
                        <button @click="inputKeyNum" class="key">2</button>
                        <button @click="inputKeyNum" class="key">3</button>
                        <button @click="inputKeyNum" class="key">4</button>
                        <button @click="inputKeyNum" class="key">5</button>
                        <button @click="inputKeyNum" class="key">6</button>
                        <button @click="inputKeyNum" class="key">7</button>
                        <button @click="inputKeyNum" class="key">8</button>
                        <button @click="inputKeyNum" class="key">9</button>
                        <button @click="clearKeyNum" class="key clear-key">清空</button>
                        <button @click="inputKeyNum" class="key">0</button>
                        <button @click="inputKeyNum" v-show="inputType == 4 || inputType == 5" class="key">.</button>
                        <button @click="deleteKeyNum" v-show="inputType == 1 || inputType == 2 || inputType == 3" class="key delete-key">删除</button>
                    </div>
                    <div class="footer">
                        <el-button @click="memberSearchShow = false" class="cancel confirm-btn">确定</el-button>
                        <el-button @click="memberSearchShow = false" class="cancel">取消</el-button>
                    </div>
                </div>
            </div>
        </Transition>
		
		<div class="page-header">
			<h2>会员管理</h2>
		</div>
		
		<div class="card">
			<div class="search-section">
				<div class="search-container">
					<el-input class="fromInput" @click="memberSearchShow = true;inputType = 1;" v-model="phoneNumSearch" placeholder="请输入手机号查询">
						<template #prefix>
							<el-icon><Search /></el-icon>
						</template>
					</el-input>
					<div class="button-group">
						<el-button @click="searchMemberInfo" type="primary">
							<el-icon><Search /></el-icon>查询
						</el-button>
						<el-button @click="createMemberInfo" type="success">
							<el-icon><Plus /></el-icon>创建新会员
						</el-button>
					</div>
				</div>
			</div>
			
			<div class="form-section">
				<div class="form-title">
					<h3>{{ optionType == 1 ? '会员信息' : '创建新会员' }}</h3>
				</div>
				
				<div class="form-container">
					<div class="form-group">
						<label>手机号码</label>
						<el-input class="fromInput" @click="memberSearchShow = true;inputType = 2;" v-model="phoneNum" placeholder="请输入手机号"></el-input>
					</div>
					
					<div class="form-group">
						<label>支付密码</label>
						<el-input type="password" class="fromInput" @click="memberSearchShow = true;inputType = 3" v-model="password" placeholder="请输入密码" show-password></el-input>
					</div>
					
					<div class="form-group">
						<label>确认密码</label>
						<el-input type="password" class="fromInput" @click="memberSearchShow = true;inputType = 4;" v-model="repassword" placeholder="请再次输入密码" show-password></el-input>
					</div>
					
					<div class="form-group">
						<label>出生日期</label>
						<el-date-picker
							class="dataPicker"
							v-model="birthday"
							type="date"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
							placeholder="选择日期">
						</el-date-picker>
					</div>
					
					<div class="form-group">
						<label>性别</label>
						<div class="radio-group">
							<el-radio v-model="sex" :label="1">男</el-radio>
							<el-radio v-model="sex" :label="2">女</el-radio>
						</div>
					</div>
				</div>
				
				<div class="form-footer">
					<el-button @click="saveMemberInfo" v-show="optionType == 1" type="primary">
						<el-icon><Check /></el-icon>保存修改
					</el-button>
					<el-button @click="createMemberInfoSave" v-show="optionType == 2" type="success">
						<el-icon><Plus /></el-icon>创建会员
					</el-button>
					<el-button @click="clearFormData" type="info">
						<el-icon><Refresh /></el-icon>重置
					</el-button>
				</div>
			</div>
		</div>
    </main>
</template>

<style>
.membermain {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 5px;
}

.page-header h2 {
  color: #303133;
  font-weight: 500;
  margin: 0;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.search-section {
  padding: 5px;
  border-bottom: 1px solid #ebeef5;
}

.search-container {
  display: flex;
  align-items: center;
  gap: 15px;
}

.button-group {
  display: flex;
  gap: 10px;
}

.form-section {
  padding: 20px;
}

.form-title {
  margin-bottom: 20px;
}

.form-title h3 {
  color: #303133;
  font-weight: 500;
  margin: 0;
}

.form-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 5px;
}

.form-group label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
  margin-bottom: 5px;
}

.fromInput, .dataPicker {
  width: 100%;
}

/* 自定义输入框样式 */
:deep(.el-input__inner) {
  height: 42px;
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  transition: all 0.3s;
  padding: 0 15px;
  font-size: 14px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

:deep(.el-input__inner:hover) {
  border-color: #c0c4cc;
}

:deep(.el-input__inner:focus) {
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

:deep(.el-input.is-active .el-input__inner) {
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

:deep(.el-date-editor.el-input) {
  width: 100%;
}

:deep(.el-date-editor .el-input__inner) {
  padding-left: 30px;
}

/* 单选按钮样式优化 */
:deep(.el-radio) {
  margin-right: 20px;
}

:deep(.el-radio__input.is-checked .el-radio__inner) {
  background-color: #409EFF;
  border-color: #409EFF;
}

:deep(.el-radio__input.is-checked+.el-radio__label) {
  color: #409EFF;
}

:deep(.el-radio__inner) {
  border: 1px solid #dcdfe6;
  width: 18px;
  height: 18px;
}

:deep(.el-radio__inner::after) {
  width: 6px;
  height: 6px;
}

.radio-group {
  display: flex;
  gap: 20px;
  padding-top: 5px;
}

.form-footer {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.fromInput, .dataPicker {
  width: 100%;
}

/* 数字键盘样式优化 */
.memberRechargeSearchModel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modelInfo {
  width: 35%;
  max-width: 450px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  padding: 25px;
  display: flex;
  flex-direction: column;
}

.numKey {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.key {
  height: 60px;
  border-radius: 8px;
  border: none;
  background-color: #f5f7fa;
  color: #303133;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  display: flex;           /* 添加flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  padding: 0;              /* 移除内边距 */
  line-height: 1;          /* 设置行高为1 */
  text-align: center;      /* 文本居中 */
}

.key:hover {
  background-color: #ecf5ff;
  transform: translateY(-2px);
}

.key:active {
  background-color: #409EFF;
  color: white;
  transform: translateY(1px);
}

.clear-key {
  background-color: #f56c6c;
  color: white;
}

.clear-key:hover {
  background-color: #f78989;
}

.delete-key {
  background-color: #e6a23c;
  color: white;
}

.delete-key:hover {
  background-color: #ebb563;
}

.footer {
  display: flex;
  gap: 15px;
}

.cancel {
  flex: 1;
  height: 45px;
  display: flex;           /* 添加flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  font-size: 16px;         /* 调整字体大小 */
}

.confirm-btn {
  background-color: #409EFF;
  color: white;
}

/* 过渡动画 */
.memberRechargeSearch-enter-active, 
.memberRechargeSearch-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}

.memberRechargeSearch-enter-from, 
.memberRechargeSearch-leave-to {
  opacity: 0;
  transform: scale(0.9);
}

/* 添加图标样式 */
.el-icon {
  margin-right: 5px;
  vertical-align: middle;
}

.el-button .el-icon {
  font-size: 16px;
}
</style>